<template>
  <el-card>
    <el-button @click="addFn">添加</el-button>
  </el-card>
  <el-table :data="list" style="width: 100%" border>
    <el-table-column prop="id" label="ID" />
    <el-table-column prop="username" label="用户名" />
    <el-table-column prop="nickName" label="姓名" />
    <el-table-column prop="email" label="邮箱" />
    <el-table-column prop="createTime" label="添加时间">
    </el-table-column>
    <el-table-column prop="loginTime" label="最后登录">
    </el-table-column>
    <el-table-column prop="status" label="是否启用">
      <template #default="{ row }">
        <el-switch v-model="row.status" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
          :active-value="1" :inactive-value="0" />
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default>
        <el-button type="primary" link>编辑</el-button>
        <el-button type="primary" link>分配角色</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="flex" style="justify-content: flex-end;">
    <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[10, 20, 50, 100]"
      :background="true" layout="total, sizes, prev, pager, next, jumper" :total="total" />
  </div>
</template>
<script setup lang='ts'>
import { useTable } from '@/hooks/useTable'
import { getProductListApi } from '@/api'
const { list, pageNum, pageSize, total, fetchApi } = useTable(getProductListApi, { pageSize: 2 });

const addFn = () => {
  pageNum.value = 1;
  fetchApi();
}

</script>
<style lang="less" scoped></style>